<template>
    <div>
        <el-row>
            <el-card>
                <el-row>
                    <el-col :span="6.5">
                        <div>
                            <img src="../assets/zut.png" />
                        </div>
                    </el-col>
                    <el-col :span="8" style="text-align:left;">
                        <div
                                style="font-family: myFirstFont;font-weight:bold;font-size: 250%"
                        >
                            区域id：{{ this.area.id }}<br />
                            区域名称：{{ this.area.name }}<br />
                            权限：{{ this.area.role }}<br />
                            估计人数：{{ this.area.number }}<br />
                            起始时间点：{{ this.area.beginTime }}<br />
                            结束时间点：{{ this.area.endTime }}<br />
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-row>
        <el-row>
            <el-card>
                <div style="margin-top: 15px;" id="app">
                    <el-table
                            v-loading="loading"
                            :data="tableData"
                            @selection-change="handleSelectionChange"
                            style="width: 100%"
                    >
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column
                                prop="person_name"
                                label="人员名称"
                                sortable
                                width="100"
                        ></el-table-column>
                        <el-table-column
                                prop="area_name"
                                label="区域名称"
                                sortable
                                width="150"
                        ></el-table-column>
                        <el-table-column
                                prop="status"
                                label="通行状态"
                                sortable
                                width="200"
                        >
                            <template slot-scope="scope">
                                <p v-if="scope.row.status == 'A'">正常</p>
                                <p v-if="scope.row.status == 'B'">非正常时间进出</p>
                                <p v-if="scope.row.status == 'C'">越权进出</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="direction" label="进出" sortable width="100">
                            <template slot-scope="scope">
                                <p v-if="scope.row.direction == 'A'">进入</p>
                                <p v-if="scope.row.direction == 'B'">离开</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="recordDate"
                                label="通行时间"
                                sortable
                                width="200"
                        ></el-table-column>
                        <el-table-column align="right" width="130">
                            <template slot="header">
                                <el-button
                                        type="primary"
                                        @click="exportExcel()"
                                        size="mini"
                                        plain
                                >导出所选中信息</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            style="margin: 15px 0px;"
                            prev-text="上一页"
                            next-text="下一页"
                            background
                            layout="prev, pager, next, sizes, jumper, total"
                            :page-sizes="[5, 10, 20, 40, 100, 500, 50000]"
                            :page-size="pageSize"
                            :total="total"
                            :current-page="pageNow"
                            @current-change="findPage"
                            @size-change="findSize"
                    >
                    </el-pagination>
                </div>
            </el-card>
        </el-row>
        <el-divider content-position="left">数据分析</el-divider>
        <el-row class="mb20">
             <el-card>
          <div id="spirits_diagram" style="height:400px;"></div>
        </el-card>
        </el-row>
        <el-row :gutter="20">
            <el-col :lg="12" :xl="16" class="mb20">
                <el-card>
          <div id="radar_diagram" style="height:400px;"></div>
        </el-card>
            </el-col>
            <el-col :lg="12" :xl="16" class="mb20">
              <el-card>
          <div id="barChart_diagram" style="height:400px;"></div>
        </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import echarts from "echarts";
    import XLSX from "xlsx";
    import getPerson from "@/plugins/getPerson.js";
    import format from "../plugins/format";
    var list = [];

    export function validateAccountNumber(str) {
        const reg = /^([1-9]{1})$/;
        return reg.test(str);
    }

    export default {
        data() {
            let num = /^(0|\+?[1-9][0-9]*)$/;
            let isNum = (rule, value, callback) => {
                if (!num.test(value)) {
                    return callback(new Error("格式错误"));
                } else {
                    callback();
                }
            };
            let percent = /^(?:[1-9]?\d|100)$/;
            let isPercent = (rule, value, callback) => {
                if (!percent.test(value)) {
                    return callback(new Error("请输入0-100的整数"));
                } else {
                    callback();
                }
            };
            const _this = this;
            return {
                pickerOptions: {
                    shortcuts: [
                        {
                            text: "今天",
                            onClick(picker) {
                                picker.$emit("pick", new Date());
                            },
                        },
                        {
                            text: "昨天",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit("pick", date);
                            },
                        },
                        {
                            text: "一周前",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", date);
                            },
                        },
                    ],
                },
                save: false,
                delete_button: 1,
                update_button: 1,
                fileList: [],
                jsonData: null,
                jsonStr: "",
                setExcel: false,
                getExcel: false,
                loading: false,
                total: 0, //总页数，从后台查询
                pageNow: 1, //当前页数，默认为1
                pageSize: 5, //当前页显示的数据条数，默认为5
                input4: null,
                select: "请选择",
                tableData: null,
                multipleSelection: [],
                area: {
                    id: this.$route.query.id,
                    name: "",
                    role: "",
                    number: "",
                    beginTime: "",
                    endTime: "",
                },
            };
        },
        created() {
            const _this = this;
            _this.$http.area.findOne(_this.area.id).then(function(resp) {
                if (resp.code == 2000) {
                    _this.area = resp.data;
                }
            });
            _this.findAllTableDataByPage();
        },
        mounted(){
            this.initDiagram_radar();
            this.initDiagram_barChart();
            this.initDiagram_spirits();
        },
        methods: {
            exportExcel() {
                //创建book
                var wb = XLSX.utils.book_new();
                //json转sheet
                var ws = XLSX.utils.json_to_sheet(this.multipleSelection, {});
                //设置列宽
                ws["!cols"] = [{ width: 15 }, { width: 15 }, { width: 30 }];
                var timestamp = new Date().getTime();
                //sheet写入book
                XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
                //输出
                XLSX.writeFile(wb, "file_" + timestamp + ".xlsx");
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                //console.log(val)
            },
            findPage(page) {
                // console.log('当前页数：' + page)
                this.pageNow = page;
                this.findAllTableDataByPage();
            },
            findSize(size) {
                // console.log('当前页面记录条数：' + size)
                this.pageSize = size;
                this.findAllTableDataByPage();
            },
            findAllTableDataByPage() {
                const _this = this;
                let pageRequest = {
                    pageNow: this.pageNow,
                    pageSize: this.pageSize,
                    a_id: this.$route.query.id,
                };
                this.$http.record.findByPageByA_id(pageRequest).then((res) => {
                    this.tableData = res.data;
                    this.total = res.total;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].area_name = res.data[i].area.name;
                        this.tableData[i].person_name = res.data[i].person.name;
                    }
                });
            },
            initDiagram_radar(){
                this.$http.record.findAll().then(function(resp){
                 var chart_data = resp.data;
                 console.log("请求的数据：",chart_data);
                 var stringArea=['A','B','C','D','E'];
                 var person_Categroy=[[],[],[],[],[]];
                 for(let i=0;i<5;i++)
                  for(let j=0;j<5;j++)
                    person_Categroy[i][j]=0;
                for(let i=0;i<chart_data.length;i++){
                    for(let j=0;j<stringArea.length;j++)
                     if(chart_data[i].area.role==stringArea[j]){
                      switch(chart_data[i].person.role){
                        case 0:person_Categroy[j][0]=person_Categroy[j][0]+1; break;
                        case 1:person_Categroy[j][1]=person_Categroy[j][1]+1; break;
                        case 2:person_Categroy[j][2]=person_Categroy[j][2]+1; break;
                        case 3:person_Categroy[j][3]=person_Categroy[j][3]+1; break;
                        case 4:person_Categroy[j][4]=person_Categroy[j][4]+1; break;
                      }
                    }
                 }
                 var myChart = echarts.init(document.getElementById('radar_diagram'));
                 var  option = {
    angleAxis: {
        type: 'category',
        data: ['外来人员', '本科生','研究生', '教工','职工']
    },
    radiusAxis: {
    },
    polar: {
    },
    series: [{
        type: 'bar',
        data: person_Categroy[0],
        coordinateSystem: 'polar',
        name: '校门',
        stack: '校门'
    }, {
        type: 'bar',
        data: person_Categroy[1],
        coordinateSystem: 'polar',
        name: '宿舍楼',
        stack: '宿舍楼'
    }, {
        type: 'bar',
        data: [1,6,6,2,3],
        coordinateSystem: 'polar',
        name: '教学楼',
        stack: '教学楼'
    },
    {
        type: 'bar',
        data: person_Categroy[3],
        coordinateSystem: 'polar',
        name: '行政楼',
        stack: '行政楼'
    },
    {
        type: 'bar',
        data: person_Categroy[4],
        coordinateSystem: 'polar',
        name: '图书馆',
        stack: '图书馆'
    }],
    legend: {
        show: true,
        data: ['校门', '宿舍楼', '教学楼', '行政楼', '图书馆']
    }
};
                 myChart.setOption(option);
                 window.addEventListener("resize", function() {
                 myChart.resize();
        });
        });
            },
            initDiagram_barChart(){
                  this.$http.record.findAll().then(function(resp){
                 var chart_data = resp.data;
                 var stringArea=['A','B','C','D','E'];
                 var person_Categroy=[[],[],[],[],[]];
                 for(let i=0;i<5;i++)
                  for(let j=0;j<5;j++)
                    person_Categroy[i][j]=0;
                for(let i=0;i<chart_data.length;i++){
                    for(let j=0;j<stringArea.length;j++)
                     if(chart_data[i].area.role==stringArea[j]){
                      switch(chart_data[i].person.role){
                        case 0:person_Categroy[j][0]=person_Categroy[j][0]+1; break;
                        case 1:person_Categroy[j][1]=person_Categroy[j][1]+1; break;
                        case 2:person_Categroy[j][2]=person_Categroy[j][2]+1; break;
                        case 3:person_Categroy[j][3]=person_Categroy[j][3]+1; break;
                        case 4:person_Categroy[j][4]=person_Categroy[j][4]+1; break;
                      }
                    }
                 }
                var myChart = echarts.init(document.getElementById('barChart_diagram'));
                var posList = [
                    'left', 'right', 'top', 'bottom',
                    'inside',
                    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                ];

                    app.configParameters = {
                        rotate: {
                            min: -90,
                            max: 90
                        },
                        align: {
                            options: {
                                left: 'left',
                                center: 'center',
                                right: 'right'
                            }
                        },
                        verticalAlign: {
                            options: {
                                top: 'top',
                                middle: 'middle',
                                bottom: 'bottom'
                            }
                        },
                        position: {
                            options: echarts.util.reduce(posList, function (map, pos) {
                                map[pos] = pos;
                                return map;
                            }, {})
                        },
                        distance: {
                            min: 0,
                            max: 100
                        }
                    };

                    app.config = {
                        rotate: 90,
                        align: 'left',
                        verticalAlign: 'middle',
                        position: 'insideBottom',
                        distance: 15,
                        onChange: function () {
                            var labelOption = {
                                normal: {
                                    rotate: app.config.rotate,
                                    align: app.config.align,
                                    verticalAlign: app.config.verticalAlign,
                                    position: app.config.position,
                                    distance: app.config.distance
                                }
                            };
                            myChart.setOption({
                                series: [{
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }]
                            });
                        }
                    };


                    var labelOption = {
                        show: true,
                        position: app.config.position,
                        distance: app.config.distance,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        rotate: app.config.rotate,
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rich: {
                            name: {
                                textBorderColor: '#fff'
                            }
                        }
                    };

                    var option = {
                        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['本科生', '研究生', '教工', '职工']
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {show: false},
                                data: ['校门', '宿舍楼', '教学楼', '行政楼', '图书馆']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '本科生',
                                type: 'bar',
                                barGap: 0,
                                label: labelOption,
                                data: person_Categroy[1]
                            },
                            {
                                name: '研究生',
                                type: 'bar',
                                label: labelOption,
                                data: person_Categroy[2]
                            },
                            {
                                name: '教工',
                                type: 'bar',
                                label: labelOption,
                                data: person_Categroy[3]
                            },
                            {
                                name: '职工',
                                type: 'bar',
                                label: labelOption,
                                data:person_Categroy[4]
                            }
                        ]
                    };
                                myChart.setOption(option);
                                    window.addEventListener("resize", function() {
                                    myChart.resize();
                            });
                                }
                  )},
            initDiagram_spirits(){
                this.$http.record.findAll().then(function(resp){
                    var myChart=echarts.init(document.getElementById("spirits_diagram"));
                    var spirit='image:@/assets/img1.jpg';
                    var maxData = 2000;
                    var  option = {
                        tooltip: {
                        },
                        xAxis: {
                            max: maxData,
                            splitLine: {show: false},
                            offset: 10,
                            axisLine: {
                                lineStyle: {
                                    color: '#999'
                                }
                            },
                            axisLabel: {
                                margin: 10
                            }
                        },
                        yAxis: {
                            data: ['本科生', '研究生', '教工', '职工'],
                            inverse: true,
                            axisTick: {show: false},
                            axisLine: {show: false},
                            axisLabel: {
                                margin: 10,
                                color: '#999',
                                fontSize: 16
                            }
                        },
                        grid: {
                            top: 'center',
                            height: 200,
                            left: 70,
                            right: 100
                        },
                        series: [{
                            // current data
                            type: 'pictorialBar',
                            symbol: spirit,
                            symbolRepeat: 'fixed',
                            symbolMargin: '5%',
                            symbolClip: true,
                            symbolSize: 30,
                            symbolBoundingData: maxData,
                            data: [891, 1220, 660, 1670],
                            markLine: {
                                symbol: 'none',
                                label: {
                                    formatter: 'max: {c}',
                                    position: 'start'
                                },
                                lineStyle: {
                                    color: 'green',
                                    type: 'dotted',
                                    opacity: 0.2,
                                    width: 2
                                },
                                data: [{
                                    type: 'max'
                                }]
                            },
                            z: 10
                        }, {
                            // full data
                            type: 'pictorialBar',
                            itemStyle: {
                                normal: {
                                    opacity: 0.2
                                }
                            },
                            label: {
                                show: true,
                                formatter: function (params) {
                                    return (params.value / maxData * 100).toFixed(1) + ' %';
                                },
                                position: 'right',
                                offset: [10, 0],
                                color: 'green',
                                fontSize: 18
                            },
                            animationDuration: 0,
                            symbolRepeat: 'fixed',
                            symbolMargin: '5%',
                            symbol: spirit,
                            symbolSize: 30,
                            symbolBoundingData: maxData,
                            data: [891, 1220, 660, 1670],
                            z: 5
                        }]
};
                    myChart.setOption(option);
                    window.addEventListener("resize", function() {
                    myChart.resize();
                    })
                   // Make dynamic data.
                    function random() {
                        return +(Math.random() * (maxData - 10)).toFixed(1);
                    }
                    setInterval(function () {
                        var dynamicData = [random(), random(), random(), random()];
                        myChart.setOption({
                            series: [{
                                data: dynamicData.slice()
                            }, {
                                data: dynamicData.slice()
                            }]
                        })
                    }, 3000)
               })
                  }
                },
    };
</script>

<style scoped></style>
